<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function addCs() {
            //1.创建元素
            var cs = document.createElement("li");
            cs.id = "cs";
            cs.innerHTML = "长沙";
            var ul = document.getElementById("city");
            ul.appendChild(cs); //2.添加到列表的最后

        }
        function addCsBeforeSz() {
            //1.创建元素
            var cs = document.createElement("li");
            cs.id = "cs";
            cs.innerHTML = "长沙";
            var ul = document.getElementById("city");
            ul.appendChild(cs); //2.添加到列表的最后
            var sz = document.getElementById("sz");
            ul.insertBefore(cs, sz);
        }
        function replaceSz() {
            //1.创建元素
            var cs = document.createElement("li");
            cs.id = "cs";
            cs.innerHTML = "长沙";
            var ul = document.getElementById("city");
            var sz = document.getElementById("sz");
            ul.replaceChild(cs, sz); //2.替换深圳
        }
        function removeSz() {

            var sz = document.getElementById("sz");
            sz.remove(); //删除深圳
        }
        function clearCity() {
            // var ul = document.getElementById("city");
            // ul.innerHTML = ""; //清空城市列表
            var ul = document.getElementById("city")
            var first = ul.firstChild
            while (first != null) {
                first.remove(); //删除第一个子元素
                first = ul.firstChild; //更新first
            }
        }
    </script>
</head>

<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>

    <hr>
    <!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li>  -->
    <button onclick="addCs()">增加长沙</button>
    <!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li>  -->
    <button onclick="addCsBeforeSz()">在深圳前插入长沙</button>
    <!-- 目标3  将城市列表的深圳替换为  <li id="cs">长沙</li>  -->
    <button onclick="replaceSz()">替换深圳</button>
    <!-- 目标4  将城市列表删除深圳  -->
    <button onclick="removeSz()">删除深圳</button>
    <!-- 目标5  清空城市列表  -->
    <button onclick="clearCity()">清空</button>
</body>

</html>